<template>
  <AdminLayout title="规格模板管理" subtitle="管理产品规格模板">
    <template #actions>
      <Link :href="route('admin.specification-templates.create')" 
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-200">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
        添加规格模板
      </Link>
    </template>

    <!-- 删除确认对话框 -->
    <ConfirmDialog
      :show="showDeleteDialog"
      title="删除规格模板"
      :message="deleteMessage"
      warning="删除后无法恢复，请确认是否继续？"
      type="danger"
      confirm-text="删除"
      @close="showDeleteDialog = false"
      @confirm="confirmDelete"
    />

    <!-- 规格模板列表 -->
    <div class="bg-white shadow-sm rounded-lg">
      <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">规格模板列表</h3>
      </div>
      
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                模板名称
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                适用分类
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                规格数量
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                状态
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                排序
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                创建时间
              </th>
              <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="template in templates" :key="template.id" class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div>
                    <div class="text-sm font-medium text-gray-900">
                      {{ template.name }}
                    </div>
                    <div class="text-sm text-gray-500">
                      {{ template.slug }}
                    </div>
                    <div v-if="template.description" class="text-xs text-gray-400 mt-1">
                      {{ template.description }}
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span v-if="template.category" 
                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                  {{ template.category.name }}
                </span>
                <span v-else 
                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                  全局模板
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {{ template.attributes_count }} 个规格
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex flex-col space-y-1">
                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
                        :class="template.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
                    {{ template.is_active ? '启用' : '禁用' }}
                  </span>
                  <span v-if="template.is_default" 
                        class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                    默认模板
                  </span>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {{ template.sort_order }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ template.created_at }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <div class="flex items-center justify-end space-x-2">
                  <Link :href="route('admin.specification-templates.edit', template.id)" 
                        class="text-gray-600 hover:text-gray-900 transition-colors duration-200">
                    编辑
                  </Link>
                  <button @click="deleteTemplate(template)" 
                          class="text-red-600 hover:text-red-900 transition-colors duration-200">
                    删除
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 空状态 -->
      <div v-if="templates.length === 0" class="text-center py-12">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">暂无规格模板</h3>
        <p class="mt-1 text-sm text-gray-500">开始创建你的第一个规格模板</p>
        <div class="mt-6">
          <Link :href="route('admin.specification-templates.create')" 
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-200">
            <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            添加规格模板
          </Link>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Link, router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import ConfirmDialog from '@/Components/ConfirmDialog.vue'
import { useNotification } from '@/composables/useNotification'

const props = defineProps({
  templates: {
    type: Array,
    required: true
  }
})

// 通知功能
const { showSuccess, showError } = useNotification()

// 删除确认对话框
const showDeleteDialog = ref(false)
const deleteDialogData = ref({
  id: null,
  name: ''
})

const deleteMessage = computed(() => {
  return `确定要删除规格模板"${deleteDialogData.value.name}"吗？`
})

const deleteTemplate = (template) => {
  deleteDialogData.value = {
    id: template.id,
    name: template.name
  }
  showDeleteDialog.value = true
}

const confirmDelete = () => {
  router.delete(route('admin.specification-templates.destroy', deleteDialogData.value.id), {
    onSuccess: () => {
      // 后端已经发送了 flash 消息，这里不需要重复显示
      showDeleteDialog.value = false
    },
    onError: () => {
      showError('删除失败', '删除规格模板失败，请重试')
    }
  })
}
</script>
